<template>
    <Card :bordered="false" :dis-hover="true">
        <p slot="title" style="height:35px;margin-top:5px" align="right">
            <AutoComplete
                    clearable
                    icon="ios-search"
                    placeholder="姓名 / 手机 / 病历号"
                    style="width:250px">
                <div>
                </div>
            </AutoComplete>
        </p>
        <p v-if="datas.length === 0" align="center">
            <img width="20%" src="@/images/noData.png"></img>
        </p>
        <Form ref="formInline" :model="formItem" :rules="ruleForm" :label-width="100">
            <Row type="flex" :gutter="8">
                <Col v-for="item in datas" span="12">
                    <Card style="width:100%">
                        <p style="font-size: 18px" slot="title">
                            <Row>
                                <Col span="12">
                                    <label>{{item.patientName}} - {{item.medicalId}}</label>
                                </Col>
                            </Row>
                        </p>
                        <a style="color: #5cadff" v-if="item.status === 0" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <a style="color: #2d8cf0" v-if="item.status === 1" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <a style="color: #ff9900" v-if="item.status === 2" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <a style="color: #ed3f14" v-if="item.status === 3" href="#" slot="extra">
                            <Icon type="record"></Icon>
                            {{item.status | statusFilter}}
                        </a>
                        <Tabs ref="tabs" @on-click="clickTabPane">
                            <TabPane name="1" style="font-size: 16px" label="预约详情" icon="clipboard">
                                <Row>
                                    <Col span="6" align="center">
                                        <label>预约类型：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.type | typeFilter}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>预约时间：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.appointment | dateFormatter}}</label>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="6" align="center">
                                        <label>预约医生：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.doctorName}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>预约护士：</label>
                                    </Col>
                                    <Col span="6">
                                        <label>{{item.nurseName}}</label>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col span="6" align="center">
                                        <label>提醒方式：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.remind | remindFilter}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>处理方式：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.process | processFilter}}</label>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <label>主管医生：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.competentDoctor | competentDoctorFilter}}</label>
                                    </Col>
                                    <Col span="6" align="center">
                                        <label>主管护士：</label>
                                    </Col>
                                    <Col span="6">
                                        <label style="text-align: left">{{item.competentNurse | competentNurseFilter}}</label>
                                    </Col>
                                </Row>
                                <Row style="margin-top: 5px">
                                    <Col span="6" align="center">
                                        <label>预约备注：</label>
                                    </Col>
                                    <Col span="18">
                                        <p style="height: 50px">{{item.note | noteFilter}}</p>
                                    </Col>
                                </Row>
                            </TabPane>
                        </Tabs>
                    </Card>
                </Col>
            </Row>
        </Form>
    </Card>
</template>

<script>
    import iviewButton from '@/view/common/button/Button.vue';
    export default {
        name: 'text-editor',
        components: {
            iviewButton
        },
        data () {
            return {
                menuId: 2000,
                baseURL: '/user/reservation',
                selectRows: [],
                selectRow: {},
                datas: [],
                buttons: []
            };
        },
        filters: {
            statusFilter (value) {
                let temp = ''
                if (value === 0) {
                    temp = '已预约'
                } else if (value === 1) {
                    temp = '已回访'
                } else if (value === 2) {
                    temp = '已到场'
                } else if (value === 3) {
                    temp = '已接诊'
                }
                return temp
            },
            typeFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '会员预约'
                } else if (value === 2) {
                    temp = '非会员预约'
                }
                return temp
            },
            remindFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '短信'
                } else if (value === 2) {
                    temp = '微信'
                } else if (value === 3) {
                    temp = '电话'
                }
                return temp
            },
            processFilter (value) {
                let temp = ''
                if (value === 1) {
                    temp = '电话随访'
                } else if (value === 2) {
                    temp = '预约到店'
                }
                return temp
            },
            competentDoctorFilter (value) {
                let temp = value
                if (temp === undefined || temp === null) {
                    return '无'
                }
                return temp
            },
            competentNurseFilter (value) {
                let temp = value
                if (temp === undefined || temp === null) {
                    temp = '无'
                }
                return temp
            },
            noteFilter (value) {
                let temp = value
                if (temp === '') {
                    temp = '未填写'
                }
                return temp
            }
        },
        methods: {
            events (item, row) {
            },
            search () {
                let url = this.baseURL + '/complete'
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.datas = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            init () {
                // 加载按钮组
                this.loadButton()
                // 查询
                this.search();
            },
            loadButton () {
                this.$ajax.get('/user/buttons/' + this.menuId).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        this.buttons = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style>
</style>
